﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div class="row">
        <div class="col-sm-12">
            <p>
                Bar Chart is a way of showing multiple data points and the variation between them. They are useful for comparing between many values as seen in the image below<br /><br />
                It is one of many types provided by <a href="http://www.chartjs.org/">Chart.js</a>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Featured screenshots</h3>
        </div>
        <div class="col-sm-8">
            <img src="../lists/Templates/beta/barchart/content/imgs/featured.png" class="img-thumbnail" alt="featured screenshot" title="featured screenshot" />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Supported brow  sers</h3>
        </div>
        <div class="col-sm-10">
            <ul class="list-group">
                <li class="list-group-item">
                    <span class="badge">v9+</span>
                    Internet Explorer
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Firefox
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Google Chrome
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Safari
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Opera
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Required List columns</h3>
            <p>This template can be applied on list views that have the following columns:</p>
        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">
                <thead>
                    <tr>
                        <th class='col-sm-2'>Template Field</th>
                        <th class='col-sm-5'>Type</th>
                        <th class='col-sm-5'>Usage</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>fldTitle</td>
                        <td>Single line of text</td>
                        <td>Title for the element to be measured</td>
                    </tr>
                    <tr>
                        <td>fldValue</td>
                        <td>Number</td>
                        <td>Value for the element to be measured</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-sm-12">
            <blockquote class="border-info">
                <p class="text-info">Info</p>
                <p><h5>If you have different column names you can change them from the Apply tab and change field mappings from the <mark>Fields Mapping section</mark>.</h5></p>
            </blockquote>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Settings</h3>
            <p>This template has the following settings to play with. Below are the available settings with all options and their default values:</p>

        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">
                <thead>
                    <tr>
                        <th class='col-sm-3'>Setting</th>
                        <th class='col-sm-3'>Default</th>
                        <th class='col-sm-6'>Usage</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>width</td>
                        <td>600</td>
                        <td>Chart width</td>
                    </tr>
                    <tr>
                        <td>height</td>
                        <td>400</td>
                        <td>Chart height</td>
                    </tr>
                    <tr>
                        <td>animation</td>
                        <td>true</td>
                        <td>Whether to animate the chart</td>
                    </tr>
                    <tr>
                        <td>animationSteps</td>
                        <td>60</td>
                        <td>Number of animation steps</td>
                    </tr>
                    <tr>
                        <td>animationEasing</td>
                        <td>easeOutQuart</td>
                        <td>Animation easing effect</td>
                    </tr>
                    <tr>
                        <td>showScale</td>
                        <td>true</td>
                        <td>If we should show the scale at all</td>
                    </tr>
                    <tr>
                        <td>scaleLineColor</td>
                        <td>rgba(0,0,0,.1)</td>
                        <td>Colour of the scale line</td>
                    </tr>
                    <tr>
                        <td>scaleLineWidth</td>
                        <td>1</td>
                        <td>Pixel width of the scale line</td>
                    </tr>
                    <tr>
                        <td>scaleShowLabels</td>
                        <td>true</td>
                        <td>Whether to show labels on the scale</td>
                    </tr>
                    <tr>
                        <td>scaleLabel</td>
                        <td><%=value%></td>
                        <td>Interpolated JS string - can access value</td>
                    </tr>
                    <tr>
                        <td>scaleBeginAtZero</td>
                        <td>true</td>
                        <td>Whether the scale should start at zero, or an order of magnitude down from the lowest value scaleBeginAtZero: false</td>
                    </tr>
                    <tr>
                        <td>scaleFontSize</td>
                        <td>12</td>
                        <td>Scale label font size in pixels</td>
                    </tr>
                    <tr>
                        <td>scaleFontColor</td>
                        <td>#666</td>
                        <td>Scale label font colour</td>
                    </tr>
                    <tr>
                        <td>responsive</td>
                        <td>false</td>
                        <td>whether or not the chart should be responsive and resize when the browser does. your SharePoint Master page should support responsive</td>
                    </tr>
                    <tr>
                        <td>maintainAspectRatio</td>
                        <td>true</td>
                        <td>whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container</td>
                    </tr>
                    <tr>
                        <td>showTooltips</td>
                        <td>true</td>
                        <td>Determines whether to draw tooltips on the canvas or not</td>
                    </tr>
                    <tr>
                        <td>tooltipFillColor</td>
                        <td>rgba(0,0,0,0.8)</td>
                        <td>Tooltip background colour</td>
                    </tr>
                    <tr>
                        <td>tooltipFontSize</td>
                        <td>14</td>
                        <td>Tooltip label font size in pixels</td>
                    </tr>
                    <tr>
                        <td>tooltipFontColor</td>
                        <td>#fff</td>
                        <td>Tooltip label font colour</td>
                    </tr>
                    <tr>
                        <td>tooltipTitleFontSize</td>
                        <td>14</td>
                        <td>Tooltip title font size in pixels</td>
                    </tr>
                    <tr>
                        <td>tooltipTitleFontColor</td>
                        <td>#fff</td>
                        <td>Tooltip title font colour</td>
                    </tr>
                    <tr>
                        <td>tooltipYPadding</td>
                        <td>6</td>
                        <td>pixel width of padding around tooltip text</td>
                    </tr>
                    <tr>
                        <td>tooltipXPadding</td>
                        <td>6</td>
                        <td>pixel width of padding around tooltip text</td>
                    </tr>
                    <tr>
                        <td>tooltipCaretSize</td>
                        <td>8</td>
                        <td>Size of the caret on the tooltip</td>
                    </tr>
                    <tr>
                        <td>tooltipCornerRadius</td>
                        <td>6</td>
                        <td>Pixel radius of the tooltip border</td>
                    </tr>
                    <tr>
                        <td>tooltipXOffset</td>
                        <td>10</td>
                        <td>Pixel offset from point x to tooltip edge</td>
                    </tr>
                    <tr>
                        <td>tooltipTemplate</td>
                        <td><%if (label){%><%=label%>: <%}%><%= value %></td>
                        <td>Template string for single tooltips</td>
                    </tr>
                    <tr>
                        <td>multiTooltipTemplate</td>
                        <td><%= value %></td>
                        <td>Template string for multi tooltips</td>
                    </tr>



                    <tr>
                        <td>scaleShowGridLines</td>
                        <td>true</td>
                        <td>Whether grid lines are shown across the chart</td>
                    </tr>
                    <tr>
                        <td>scaleGridLineColor</td>
                        <td>rgba(0,0,0,.05)</td>
                        <td>Color of the grid lines</td>
                    </tr>
                    <tr>
                        <td>scaleGridLineWidth</td>
                        <td>1</td>
                        <td>Width of the grid lines</td>
                    </tr>
                    <tr>
                        <td>barShowStroke</td>
                        <td>true</td>
                        <td>If there is a stroke on each bar</td>
                    </tr>
                    <tr>
                        <td>barStrokeWidth</td>
                        <td>2</td>
                        <td>Pixel width of the bar stroke</td>
                    </tr>
                    <tr>
                        <td>barValueSpacing</td>
                        <td>5</td>
                        <td>Spacing between each of the X value sets</td>
                    </tr>
                    <tr>
                        <td>barDatasetSpacing</td>
                        <td>1</td>
                        <td>Spacing between data sets within X values</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Credit</h3>
            <p>The following libraries were used to help creating this template:</p>

        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">

                <tbody>
                    <tr>
                        <td><a href="http://www.chartjs.org/" target="_blank">Chart.js</a></td>

                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>